<template>
  <div>
    <el-button @click="handleAddCellClick(1)">功能区1</el-button>
    <el-button @click="handleAddCellClick(2)">功能区2</el-button>
    <el-button @click="handleAddCellClick(3)">功能区3</el-button>
    <div ref="controllArea" class="controll-area"></div>
    <div class="hello" ref="visContainer">
    
    </div>
    <pre id="eventSpan"></pre>    
  </div>
  
</template>

<script>
import createApp from '@/pixi-core'


export default {
  name: 'HelloWorld',
  components: {    
  },
  mounted () {
    var app = createApp()
    this.$refs.visContainer.appendChild(app.view);
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      app: null
    }
  },
  methods: {
    handleAddCellClick (type) {
      // console.log(this.$bus.emit);
      this.$bus.emit('addCell', type)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item {
  position: absolute;
  display: inline-block;
}

.hello {
  position: relative;
  width: 100%;
  height: 500px;
  background: #cccccc
}

.controll-area {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}
</style>
